<template>
  <el-drawer v-model="value" v-bind="props" ref="drawerRef">
    <template v-for="(_, name) in $slots" #[name]="scope">
      <slot :name="name" :key="name" v-bind="scope" />
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { DrawerProps } from "element-plus";
import { ElDrawerExpose } from "./types";
interface Props extends Omit<Partial<DrawerProps>, "modelValue"> {}

/** 需要按照官网文档设置默认值，否则表现效果和官网的不一致 */
const props = withDefaults(defineProps<Props>(), {
  appendToBody: false,
  appendTo: "body",
  lockScroll: true,
  closeOnClickModal: true,
  closeOnPressEscape: true,
  openDelay: 0,
  closeDelay: 0,
  destroyOnClose: false,
  modal: true,
  direction: "rtl",
  showClose: true,
  size: "30%",
  withHeader: true,
  headerAriaLevel: "2",
});

const value = defineModel({ type: Boolean });
const drawerRef = ref();

defineExpose<ElDrawerExpose>({
  // @ts-ignore
  instance: drawerRef,
});
</script>
